import "./index.scss"
import {View, Image, Text, Switch} from "@tarojs/components"
import {observer} from "mobx-react"
import {useContext, useEffect, useState} from "react"
import Taro, {useDidHide, useDidShow, useRouter} from "@tarojs/taro"
import {uploadSwitchSettingStore} from "./model"
import {selectDevDataSwitchApi, setUpLoadSwitchApi} from "@/api/dataSwitch.ts"

const Uploadswitchsetting = () => {
	let router = useRouter()
	const {updatePageQuery, pageQuery, clearPageQuery} = useContext(uploadSwitchSettingStore)

	// 数据开关状态、
	const [dataSwitchStatus, setDataSwitchStatus] = useState(false)

	// 可以使用所有的 React Hooks
	useEffect(() => {
		console.log("Uploadswitchsetting useEffect")
	})
	// 对应 onShow
	useDidShow(() => {
		console.log("Uploadswitchsetting useDidShow")
		updatePageQuery(router.params)
		console.log(router.params, "router.params")
		selectDevDataSwitchStatusFunc()
	})
	// 对应 onHide
	useDidHide(() => {
		console.log("Uploadswitchsetting useDidHide")
		clearPageQuery()
	})

	// 查询设备数据开关状态的函数
	const selectDevDataSwitchStatusFunc = async () => {
		Taro.showLoading({
			title: "加载中",
			mask: true
		})
		let data = {
			devId: router.params.devId
		}
		await selectDevDataSwitchApi(data)
			.then(res => {
				console.log("查询数据开关状态", res)
				if (res.data.devSwitchValue == 1) {
					setDataSwitchStatus(true)
				} else if (res.data.devSwitchValue == 0) {
					setDataSwitchStatus(false)
				}
			})
			.finally(() => {
				Taro.hideLoading()
			})
	}

	// 设置设备数据开关状态的请求函数
	const setDevDataSwitchStatusFunc = async (status: number) => {
		Taro.showLoading({
			title: "切换中",
			mask: true
		})
		let data = {
			devId: router.params.devId,
			isOpen: status.toString()
		}
		console.log("SwitchChange", data)

		await setUpLoadSwitchApi(data)
			.then(res => {
				if (res.result == "success") {
					// 判断是开启还是关闭
					if (status == 1) {
						Taro.showToast({
							title: "开启成功",
							mask: true,
							icon: "success"
						})
					} else if (status == 0) {
						Taro.showToast({
							title: "关闭成功",
							mask: true,
							icon: "success"
						})
					}
				} else if (res.result == "error") {
					if (status == 1) {
						Taro.showToast({
							title: "开启失败",
							mask: true,
							icon: "error"
						})
						setDataSwitchStatus(true)
						setDataSwitchStatus(false)
					} else if (status == 0) {
						Taro.showToast({
							title: "关闭失败",
							mask: true,
							icon: "error"
						})
						setDataSwitchStatus(false)
						setDataSwitchStatus(true)
					}
				}
			})
			.catch(err => {
				if (status == 1) {
					Taro.showToast({
						title: "开启失败",
						mask: true,
						icon: "error"
					})
					setDataSwitchStatus(true)
					setDataSwitchStatus(false)
				} else if (status == 0) {
					Taro.showToast({
						title: "关闭失败",
						mask: true,
						icon: "error"
					})
					setDataSwitchStatus(false)
					setDataSwitchStatus(true)
				}
			})
			.finally(() => {
				Taro.hideLoading()
			})
	}

	// 数据开关change事件
	const dataSwitchStatusChange = (e: any) => {
		console.log(e.detail.value)
		let status = e.detail.value ? 1 : 0
		setDevDataSwitchStatusFunc(status)
	}
	return (
		<View className="upload_switch_setting_wrap">
			<View className="hanzi text-16 font-bold mt-8 mb-8 px-4">数据开关</View>
			<View className="hanzi text-14 text-xx_text mb-14 px-4">
				您可以对设备上传数据功能进行开/关
			</View>

			{/* 开关模块 */}
			<View className="switch_module_box">
				<View className="switch_label_box">
					<Image
						className="upload_icon_img"
						src="https://d.lohand.com:1112/images/ConstantBlueCloud/wxminiprogram/icon/upload.svg"
					></Image>
					<Text className="switch_label_text">上传数据</Text>
				</View>
				<View className="switch_switch_box">
					{/* <Text className="switch_label_text">数据开关</Text> */}
					<Switch
						className="con_switch"
						color="#0f8af9"
						checked={dataSwitchStatus}
						onChange={e => {
							dataSwitchStatusChange(e)
						}}
					/>
				</View>
			</View>
		</View>
	)
}
export default observer(Uploadswitchsetting)
